<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
    <script src="../react/axios.js"></script>
</head>

<body>
    <div id="main"></div>
    <script type="text/babel">
        class ComTwo extends React.Component {
            state = {
                num: Date.now(),
            }
            render() {
                return (<div></div>)
            }
            componentDidMount() {
                // 子传父: 3.在子组件中调用父组件传递过来的函数 并将数据作为参数传递给父组件函数
                this.props.run(this.state.num)
            }
        }
        class ComThree extends React.Component {
            render() {
                // 父传子:2.通过this.props对象接收子组件标签传递过来的属性 即携带数据
                let { time } = this.props;
                return (<div>
                    <p>这是组件33:{time}</p>
                </div>)
            }
            componentDidMount() {
            }
        }
        class Com extends React.Component {
            state = { time: 0 }
            render() {
                return (<div>
                    {/* 子传父: 2.将当前组件内的函数更改this指向后传递给子组件 */}
                    <ComTwo run={this.test.bind(this)} />
                    {/* 父传子:1将当前组件内的数据设置给子组件标签作为属性  */}
                    <ComThree time={this.state.time} />
                </div>)
            }
            // 子传父: 1,声明一个函数 携带参数 这个函数用来传递给子组件 参数接收子组件传递过来的数据
            test(n) {
                //将传递过来的数据设置给当前组件的state中(这样当前组件中的任意函数中就都可以用了)
                this.setState({ time: n })
            }
            componentDidMount() {
            }
        }

        ReactDOM.render(<Com />, document.getElementById("main"));
    </script>
</body>

</html>